﻿@{

    ViewBag.Title = "任务管理平台";
    Layout = null;
}
<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
    <title></title>

    <link href="~/favicon.ico" rel="shortcut icon" type="images/x-icon">
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="~/Content/QuartzJobManageIndex.css" rel="stylesheet" />
</head>
<body class="body-content">
    <div class="container-div" id="JobShow" v-cloak>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/JobManager/Index">任务管理平台</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
                    <ul class="nav navbar-nav " id="nav_jobStatusNav">
                        <li v-for="(nav_tab,index) in nav_tabs" :data-jobStatus="nav_tab.tabStatus" v-on:click="getJobs(nav_tab.tabStatus,pageIndex,pageSize);jobStatus=nav_tab.tabStatus"><a href="#" v-bind:class="{active_nav_class:nav_tab.tabStatus==jobStatus}">{{nav_tab.tabName}}</a></li>
                    </ul>
                    <button type="button" class="btn btn-default navbar-btn navbar-right" data-toggle="modal" data-target="#myModal_add" v-on:click="modalLabelText='新任务'">添加任务</button>
                </div>
            </div>
        </nav>

        <div>
            <!--任务列表开始-->
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>描述</th>
                        <th>执行周期</th>
                        <th>上次执行时间</th>
                        <th>下次执行时间</th>
                        <th>创建时间</th>
                        <th>异常信息</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="jobListTbody">
                    <tr v-for="job in jobs" data-jobId="job.Id">
                        <td v-for="(val,key) in job" v-bind:name="key">{{val}}</td>
                        <td>
                            <button type="button" class="btn btn-default" v-if="jobStatus==-1" v-on:click="runJob(job.Id)">部署任务</button>
                            <button type="button" class="btn btn-default" v-if="jobStatus==6||jobStatus==-2" v-on:click="pauseJob(job.Id)">暂停任务</button>
                            <button type="button" class="btn btn-default" v-if="jobStatus==1" v-on:click="resumeJob(job.Id)">恢复任务</button>
                            <button type="button" class="btn btn-default" v-if="jobStatus!=5" data-toggle="modal" data-target="#myModal_delete" v-on:click="excuteJobId=job.Id">删除任务</button>
                            <button type="button" class="btn btn-default" v-if="jobStatus==6||jobStatus==-2" data-toggle="modal" data-target="#myModal_modifyJobCron" v-on:click="excuteJobId=job.Id;">更改运行周期</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!--任务列表结束-->
            <!--新增任务弹出框开始-->
            <div class="modal fade" id="myModal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">
                                ×
                            </button>
                            <h4 class="modal-title" id="myModalLabel_add">
                                {{modalLabelText}}
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div>
                                <form class="bs-example bs-example-form" id="addJobForm" role="form">
                                    <div>
                                        <label><input type="radio" name="triggerType" value="JobCronTrigger" id="option1" v-bind:checked="cronCheck" v-on:click="cronCheck=true;simpleCheck=false;">Cron任务</label>
                                        &nbsp;
                                        <label><input type="radio" name="triggerType" id="option2" value="JobSimpleTrigger" v-bind:checked="simpleCheck" v-on:click="cronCheck=false;simpleCheck=true;">Simple任务</label>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">任务名称：</span>
                                        <input type="text" class="form-control" placeholder="xxx" name="jobName" v-model="addOrEditModel.jobName">
                                    </div>
                                    <br>
                              
                                    <div v-if="cronCheck">
                                        <div class="input-group">
                                            <span class="input-group-addon">执行周期表达式：</span>
                                            <input type="text" class="form-control" placeholder="xxx" name="cron" v-model="addOrEditModel.cron" style="width:66%">
                                            <a href="javascript:;" style="margin-left:20px;" data-toggle="modal" data-target="#myModal_settingCron">不会写？点击这里</a>
                                        </div>
                                        <br>
                                    </div>
                                    <div v-if="simpleCheck">

                                        <div class="input-group">
                                            <span class="input-group-addon">执行周期：</span>
                                            <input type="text" class="form-control" placeholder="xxx" name="cycle" v-model="addOrEditModel.cycle">
                                        </div>
                                        <br>

                                        <div class="input-group">
                                            <span class="input-group-addon">重复次数：</span>
                                            <input type="text" class="form-control" placeholder="xxx" name="repeatCount" v-model="addOrEditModel.repeatCount">
                                        </div>
                                        <br>
                                    </div>

                                    <div class="input-group">
                                        <span class="input-group-addon">任务描述：</span>
                                        <input type="text" class="form-control" placeholder="xxx" name="jobDescription" v-model="addOrEditModel.jobDescription">
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span class="input-group-addon">请求地址：</span>
                                        <input type="text" class="form-control" placeholder="xxx" name="requestUrl" v-model="addOrEditModel.requestUrl">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default"
                                                data-dismiss="modal">
                                            关闭
                                        </button>
                                        <button type="button" v-on:click="addJob(this)" class="btn btn-primary">
                                            提交
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--新增弹出框结束-->
            <!--分页开始-->
            <ul class="pager" v-if="totalCount>pageSize">
                <li><a href="#" v-if="pageIndex>1" v-on:click="pageIndex=pageIndex-1;getJobs(jobStatus,pageIndex,pageSize)">上一页</a></li>
                <li><a href="#" v-if="pageIndex<Math.ceil(totalCount/pageSize)" v-on:click="pageIndex=pageIndex+1;getJobs(jobStatus,pageIndex,pageSize)">下一页</a></li>
            </ul>
            <!--分页结束-->
        </div>
        <!--选择Cron开始-->
        <div class="modal fade" id="myModal_settingCron" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width:900px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel_add">
                            配置Cron表达式
                        </h4>
                    </div>
                    <div class="modal-body" style="height:600px;">
                        <div>
                            <iframe src="http://cron.qqe2.com/" style="width:850px;height:560px;" scrolling="no"></iframe>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--选择Cron结束-->
        <!--删除提示框开始-->
        <div class="modal fade" id="myModal_delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel_delete">删除任务</h4>
                    </div>
                    <div class="modal-body">
                        您确认删除此任务吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="button" class="btn btn-primary" v-on:click.stop="deleteJob(excuteJobId)" value="确认" />
                    </div>
                </div>
            </div>
        </div>
        <!--删除提示框结束-->
        <!--更改运行周期开始-->
        <div class="modal fade" id="myModal_modifyJobCron" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel_modifyJobCron">更改运行周期</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon">执行周期表达式：</span>
                            <input type="text" class="form-control" placeholder="xxx" name="cron" v-model="cronForModify">
                            <a href="javascript:;" data-toggle="modal" data-target="#myModal_settingCron" style="margin-left:20px;">不会写？点击这里</a>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" v-on:click.stop="modifyJobCron(excuteJobId,cronForModify)">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!--更改运行周期结束-->
        <!--加载动画开始-->
        <div class="loadEffect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!--加载动画结束-->
    </div>
</body>
</html>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="~/Scripts/bootstrap-filestyle.min.js"></script>
<script src="~/Scripts/vue.min.js"></script>
<script>
    $(function () {
        var vm = new Vue({
            el: '#JobShow',
            data: {
                jobs: [],
                modalLabelText: '新任务',
                jobStatus: 6,
                pageIndex: 1,
                pageSize: 5,
                totalCount: 0,
                cronForModify: '',
                excuteJobId: -1,
                cronCheck: true,
                simpleCheck: false,
                nav_tabs: [
                    { tabName: "待运行列表", tabStatus: -1 },
                    { tabName: "已部署列表", tabStatus: -2 },
                    { tabName: "运行中列表", tabStatus: 6 },
                    { tabName: "已完成列表", tabStatus: 2 },
                    { tabName: "错误列表", tabStatus: 3 },
                    { tabName: "阻塞列表", tabStatus: 4 },
                    { tabName: "暂停中列表", tabStatus: 1 },
                    { tabName: "已删除列表", tabStatus: 5 }
                ],
                addOrEditModel: {
                    jobName: '',
                    cron: '',
                    requestUrl: '',
                    jobDescription: '',
                    cronDescription: '',
                    cycle:'',
                    repeatCount:''

                }
            },

            mounted: function () {
                $('#datetimepicker').datetimepicker();
                $('#inputFile').filestyle();
                getJobList.bind(this)(this.jobStatus, this.pageIndex, this.pageSize);
            },
            methods: {
                //获取任务集合
                getJobs: function (jobStatus, pageIndex, pageSize) {
                    getJobList.bind(this)(jobStatus, pageIndex, pageSize);
                },
                addJob: function (event) {
                    var triggerType = '';
                    var cronJob = {};
                    var simpleJob = {};
                    if(this.cronCheck){
                        triggerType = 'JobCronTrigger';
                        cronJob.Cron = this.addOrEditModel.cron;

                    }else{
                        triggerType = 'JobSimpleTrigger';
                        simpleJob.Cycle = this.addOrEditModel.cycle;
                        simpleJob.RepeatCount = this.addOrEditModel.repeatCount;
                    }
                    var requestData = { JobName: this.addOrEditModel.jobName, TriggerType: triggerType, JobDescription: this.addOrEditModel.jobDescription, RequestUrl: this.addOrEditModel.requestUrl, CronJob: cronJob, SimpleJob: simpleJob };
                    $.ajax({
                        url: '/JobManager/AddJob',
                        type: 'POST',
                        data: requestData,
                        success: function (data) {
                            $('#myModal_add').modal('hide');
                            $('#nav_jobStatusNav li[data-jobStatus=-1]').click();
                        }
                    })
                },
                //运行任务
                runJob: function (jobId) {
                    $.post('/JobManager/RunJob', { jobId: jobId }, function (data) {
                        operateElement(jobId);
                        $('#nav_jobStatusNav li[data-jobStatus=-2]').click();
                    });
                },
                //暂停任务
                pauseJob: function (jobId) {
                    $.post('/JobManager/PauseJob', { jobId: jobId }, function (data) {
                        operateElement(jobId);
                        $('#nav_jobStatusNav li[data-jobStatus=1]').click();
                    });
                },
                //恢复任务
                resumeJob: function (jobId) {
                    $.post('/JobManager/ResumeJob', { jobId: jobId }, function (data) {
                        operateElement(jobId);
                        $('#nav_jobStatusNav li[data-jobStatus=6]').click();
                    });
                },
                //删除任务
                deleteJob: function (jobId) {

                    $.post('/JobManager/DeleteJob', { jobId: jobId }, function (data) {
                        $('#myModal_delete').modal('hide');
                        operateElement(jobId);
                        $('#nav_jobStatusNav li[data-jobStatus=5]').click();
                    });
                },
                //修改任务执行周期
                modifyJobCron: function (jobId, cron) {
                    $.post('/JobManager/ModifyJobCron', { jobId: jobId, cron: cron }, function (data) {
                        $('#jobListTbody tr td[name=Cron]').text(cron);

                        $('#myModal_modifyJobCron').modal('hide');
                    });
                }
            }
        });
        window.vm = vm;
    });
    //获取当前状态下任务列表分页数据
    function getJobList(jobStatus, pageIndex, pageSize) {
        $('.loadEffect').show();
        var _self = this;
        $.get('/JobManager/GetJobList', { jobStatus: jobStatus, pageIndex: pageIndex, pageSize: pageSize }, function (data) {
            _self.jobs = data.Data.JobList;
            _self.totalCount = data.Data.TotalCount;
            _self.jobStatus = jobStatus;
            $('.loadEffect').hide();
        });
    };
    //操作dom元素
    function operateElement(jobId) {
        $('#jobListTbody tr[data-jobId=' + jobId + ']').remove();
    };

</script>
